<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="container" id="dv">
        <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
        <label>手机</label><input type="text" id="phone"><span></span><br />
        <label>邮箱</label><input type="text" id="e-mail"><span></span><br />
        <label>座机</label><input type="text" id="telephone"><span></span><br />
        <label>姓名</label><input type="text" id="fullName"><span></span><br />
    </div>

    <script>
        function checkInput(input, reg) {
            input.onblur = function () {
                if (reg.test(this.value)) {
                    this.nextElementSibling.innerText = '正确了';
                    this.nextElementSibling.style.color = 'green';
                } else {
                    this.nextElementSibling.innerText = '错了';
                    this.nextElementSibling.style.color = 'red';
                }
            }
        }
        // qq的
        function $(selector) {
            return document.getElementById(selector);
        }
        checkInput($('qq'), /^\d{5,11}$/);
        checkInput($('phone'),/^\d{11}$/);
        checkInput($('e-mail'),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
        checkInput($('telephone'),/^\d{3,4}[-]\d{7,8}$/);
        checkInput($('fullName'),/^[\u4e00-\u9fa5]{2,6}$/);
    </script>
</body>

</html>